<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style lang="scss" >
* {
    margin: 0;
    padding: 0;
}
li {
    list-style: none; 
}
a {
    text-decoration: none;
}
body {
    background-color: #edf1f7!important;
}
// 头部
.header {
    width: 100%;
    height: 295px;
    background: no-repeat url(	https://course.myhope365.com/img/index-top-bg.564836d0.png);
    background-size: 100% 100%;
    .header-img {
       width: 1160px;
       display: flex;
       margin: 0 auto;
       justify-content: center; 
       align-items: center;
       flex-direction: column;

       > img {
            z-index: 1;
            width: 212px;
            margin: 50px 0 50px;
            border: 0;
            vertical-align: middle;
            overflow-clip-margin: content-box;
            overflow: clip;
       } 
    }
    .header-top {
        width: 100%;
        height: 80px;
        .header-nav {
            margin: 0 auto;
            position: relative;
            width: 1160px;
            height: 80px;
            .header-top-1 {
                height: 80px;
                display: flex;
                -webkit-box-align: center;
                align-items: center; 
                .header-top-nav {
                    margin-right: 30px;
                    margin-left: 40px;
                    height: 30px;
                    font-weight: 600;
                    float: left;
                    ul li {
                        float: left;
                        margin: 0 25px 0 0;
                        font-size: 16px;
                        a {
                            text-decoration: none;
                            color: #fff;
                        }
                    } 
                }
                .header-span {
                   width: 600px;
                   height: 38px;
                   .header-span-1 {
                        input {
                            width: 220px;
                            height: 38px;
                            border-radius: 20px;
                            border: none;
                            padding: 0 10px;
                            font-size: 14px;
                            outline: none;
                            margin-left: 300px;
                        } 
                        .header-span-btn {
                                width: 38px;
                                height: 38px;
                                border-radius: 20px;
                                // background-color: rgba(red, green, blue, 1);
                                border: none;
                                margin-left: -41px;
                                vertical-align: middle;
                        }
                   }
                }
                .header-right {
                    height: 100%;
                    font-size: 14px;
                    display: flex;
                    -webkit-box-align: center;
                    align-items: center; 
                    .login-box {
                        height: 100%;
                        font-size: 14px;
                        display: flex;
                        -webkit-box-align: center;
                        align-items: center; 
                        .car {
                            width: 36px;
                            height: 36px;
                            background: #fff;
                            border-radius: 50%;
                            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .23);
                            display: flex;
                            -webkit-box-align: center;
                            align-items: center;
                            -webkit-box-pack: center;
                            justify-content: center;
                            margin: 0 20px;
                        }
                        .user{
                            cursor: pointer;
                            display: flex;
                            -webkit-box-align: center;
                            align-items: center;
                            position: relative;
                            -webkit-box-pack: center;
                            justify-content: center;
                            .user-top {
                                color: #fff;
                                position: absolute;
                                font-size: 10px;
                                top: -50px;
                                width: 155px;
                                height: 41px;
                                text-align: center;
                                line-height: 30px;
                                font-weight: 500;
                                background: url();
                                background-size: 100%;
                            }
                            .user-login {
                                color: rgb(53, 199, 222);
                                width: 94px;
                                height: 30px;
                                background: #fff;
                                // -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .23);
                                box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .23);
                                border-radius: 15px;
                                font-weight: 600;
                                font-size: 15px;
                                text-align: center;
                                line-height: 20px;
                            }
                        }
                    }
                }
            } 
        }
    }
}
// 模态框样式
.modal-dialog {
   
   box-sizing: border-box;
 
   padding: 0;
   color: rgba(0, 0, 0, .65);
   font-size: 14px;
   font-variant: tabular-nums;
   line-height: 1.5;
   list-style: none;
   font-feature-settings: "tnum";
   position: relative;
   top: 100px;
   margin: 0 auto;
   padding-bottom: 24px;
   pointer-events: none;
   width: 360px;
   transform-origin: 702.333px 103px;
   .modal-content {
       position: relative;
       background-color: #fff;
       background-clip: padding-box;
       border: 0;
       border-radius: 2px;
       box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
       pointer-events: auto;
       .ant-modal-body {
           font-size: 14px;
           line-height: 1.5;
           word-wrap: break-word;
           padding: 20px 36px 24px;
           ul {
               line-height: 46px;
               white-space: nowrap;
               box-shadow: none;
               box-sizing: border-box;
               margin: 0;
               padding: 0;
               font-size: 14px;
               font-variant: tabular-nums;
               font-feature-settings: "tnum";
               margin-bottom: 0;
               padding-left: 0;
               color: rgba(0, 0, 0, .65);
               list-style: none;
               background: #fff;
               outline: none;
               transition: background .3s, width .3s cubic-bezier(.2,0,0,1) 0s;
               zoom: 1;
               // float: left;
               display: flex;
               :first-child{
                   width: 50%;
                   text-align: center;
                   margin-bottom: 10px;
                   color: #00cf8c;
                   border-bottom: 2px solid #00cf8c;
               }
               :last-child {
                   width: 50%;
                   text-align: center;
                   position: relative;
                   margin-bottom: 10px;
                   top: 1px;
                   display: inline-block;
                   vertical-align: bottom;
                   border-bottom: 2px solid transparent;
               }
           }
           .login-form {
               width: 288px;
               height: 208px;
               box-sizing: border-box;
               margin: auto;
               padding: 0;
               color: rgba(0, 0, 0, .65);
               font-size: 14px;
               font-variant: tabular-nums;
               line-height: 1.5;
               list-style: none;
               .ant-form-item {
                   width: 288px;
                   height: 40px;
                   margin-bottom: 24px;
                   height:auto;
                   input {
                       width: 100%;
                       height: 32px;
                       color: rgba(0, 0, 0, .65);
                       font-size: 14px;
                       border: 1px solid #d9d9d9;
                       padding: 4px 11px;
                   }
               }
               .login-form-action {
                   width: 100%;
                   height: 80px;
                   button {
                       width: 100%;
                       height: 32px;
                       color: #fff;
                       background: #00cf8c;
                       padding: 0 15px;
                       font-size: 14px;
                       border: 1px solid transparent;
                       border-radius: 2px;
                       font-weight: 400;
                       margin-bottom: 20px;
                   }
                   a {
                       text-decoration: none;
                   }
                   .a-1 {
                       float: left;
                       color: #999;
                   }
                   .a-2 {
                       float: right;
                       color: #999;
                   }
               }
           }
       }
   }
}
// 普通注册模态框
#registerModal {
    .modal-dialog {
        width: 380px;
        transform-origin: 62.3333px 266px;
        .register-title {
            width: 308px;
            height: 57px;
            margin: 0 auto;
            padding: 0;
            position: relative;
            font-size: 20px;
            color: #00cf8c;
            line-height: 57px;
            text-align: center;

        }
        form .ant-form-item {
            position: relative;
            height: auto;
            margin-right: 0;
            margin-left: 0;
            margin-bottom: 10px;
            zoom: 1;
            margin: 0;
            padding: 0;
            color: rgba(0, 0, 0, .65);
            font-size: 14px;
            font-variant: tabular-nums;
            line-height: 1.5;
            list-style: none;
            .ant-col-sm-6 {
                display: block;
                box-sizing: border-box;
                width: 25%;
                float: left;
                margin-bottom: 10px;

            }
            .ant-col-sm-18 {
                display: block;
                box-sizing: border-box;
                width: 75%;
                float: left;
                margin-bottom: 10px;

                input {
                    position: relative;
                    display: inline-block;
                    width: 100%;
                    height: 32px;
                    padding: 4px 11px;
                    color: rgba(0, 0, 0, .65);
                    font-size: 14px;
                    line-height: 1.5;
                    background-color: #fff;
                    background-image: none;
                    border: 1px solid #d9d9d9;
                    border-radius: 2px;
                }
            }
            .ant-input-group {
                width:75%;
                float: left;
                .ant-input-group-addon { 
                    width: 70px;
                    float: left;
                    height: 32px;
                    font-size: 14px;
                    line-height: 32px;
                    text-align: center;
                    color: rgba(0, 0, 0,.65);
                    border:1px solid #9f9f9f;
                }
                .ant-col-sm-24 {
                    width: 160px;
                    float: left;
                    height: 32px;
                    line-height: 32px;
                    color: rgba(0, 0, 0, .65);
                }
            }
            .input-1 {
                width: 35%;
                display: block;
                box-sizing: border-box;
                float: left;
                margin-bottom: 10px;
                input {
                    width: 100%;
                    height: 32px;
                    padding: 4px 11px;
                    color: rgba(0, 0, 0, .65);
                    font-size: 14px;
                    line-height: 1.5;
                    background-color: #fff;
                    background-image: none;
                    border: 1px solid #d9d9d9;
                    border-radius: 2px;
                }
            }
            .btn-1 {
                width: 35%;
                line-height: 1.499;
                position: relative;
                display: inline-block;
                font-weight: 400;
                white-space: nowrap;
                text-align: center;
                background-image: none;
                border: 1px solid transparent;
                touch-action: manipulation;
                height: 32px;
                padding: 0 15px;
                font-size: 14px;
                border-radius: 2px;
                color: #fff;
                background-color: #00cf8c;
                border-color: #00cf8c;
                text-shadow: 0 -1px 0 rgba(0, 0, 0, .12);
            }
        }
        form .register-form-action {
            button {
                width: 308px;
                height: 32px;
                margin: 0 auto;
                padding: 0;
                position: relative;
                color: #fff;
                background-color: #00cf8c;
                border: 1px solid transparent;
            }
        }
        form .end {
            
        }
    }
}
// 主体
#section {
    width: 1160px;
    height: 2550px;
    margin: -50px auto 0;
    // .swiper {
    //     width: 100%;
    //     height: 432px;
    //     background: #fff;
    //     border-radius: 8px;
    //     padding: 16px;
    //     .mySwiper{
    //         height:400px;
    //         border-radius: 8px;
    //         overflow: hidden;
    //         img {
    //             width: 100%;
    //             height: 100%;
    //             object-fit: cover;
    //         }
    //     }
    // }
    .vip-box {
        margin-top: 22px;
        height: 50px;
        background: url(https://course.myhope365.com/img/vip-line.f590fe35.png);
        display: flex;
        -webkit-box-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        align-items: center;
        margin-bottom: 30px;
        img {
            width: 30px;
            margin-right: 8px;
        }
        span {
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333;
        }
        button {
            margin-left: 3%;
            width: 72px;
            height: 26px;
            background: #6e421a;
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .23);
            border-radius: 18px;
            border: none;
            color: #fff;
            font-weight: 600;
            cursor: pointer;
        }
    }
    .live-box {
        color: #333;
        margin-bottom: 14px;
        width: 1160px;
        height: 663px;
        margin: auto; 
        position: relative;
        height: auto;
        zoom: 1;
        &::after {
            content: "";
            display: block;
            clear: both;
        }
       .ant-col{    
            box-sizing: border-box;
            width: 58.33333333%;
            padding-left: 8px;
            padding-right: 8px;
            float: left;
            .online-left {
                background: #fff;
                min-height: 662px;
                border-radius: 20px;
                padding: 30px 20px;
                .first-line {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .title-box {
                        width: 300px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        img {
                            width: 38px;
                        }
                        .title-1{
                            font-family: PingFangSC-Semibold, PingFang SC;
                            font-weight: 600;
                            font-size: 26px;
                            color: #333;
                        }
                        .title-2 {
                            margin-top: auto;
                            margin-bottom: 5px;
                            font-size: 14px;
                            font-family: PingFangSC-Medium, PingFang SC;
                            font-weight: 500;
                            color: #9f9f9f;
                            }
                        }
                        .live-next-last-box {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            img {
                                width: 20px;
                            }
                        }
                    }
                    .ant-row {
                        width:312px;
                        position: relative;
                        height: auto;
                        margin-right: -10px;
                        margin-left: -10px;
                        zoom: 1;
                        display: block;
                        box-sizing: border-box;
                        .ant-coll {
                            box-sizing: border-box;
                            padding-left: 10px;
                            padding-right: 10px;
                            // float: left;
                            .live-content-box {
                                box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .15);
                                margin-top: 20px;
                                cursor: pointer;
                                border-radius: 10px;
                                .img-box {
                                    margin-left: 0;
                                    overflow: hidden;
                                    border-radius: 10px 10px 0 0;
                                    text-shadow: 0 4px 10px rgba(0, 0, 0, .15);
                                    font-family: PingFangSC-Medium, PingFang SC; 
                                    img {
                                        width: 100%;
                                        height: 180px;
                                    }
                                }
                                .text-box {
                                    padding: 15px 0 10px 0;
                                    font-weight: 600;
                                    color: #333;
                                    margin-left: 20px;
                                }
                                .end-box {
                                    margin-left: 20px;
                                    font-size: 14px;
                                    color: #9f9f9f;
                                }
                            } 
                        }
                    }
                }
            }
        .ant-col-1 {
            width: 41.66666667%;
            padding-left: 8px;
            padding-right: 8px;
            float: right;
            .online-right {
                background: #fff;
                min-height: 603px;
                border-radius: 20px;
                padding: 30px 20px;
                box-sizing: content-box;
                .title-box {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    img {
                        width: 38px;
                        margin-right: 12px;
                    }
                }
                .content-box {
                    display: flex;
                    flex-direction: column;
                    margin-top: 20px;
                    height: 540px;
                    background: #fff;
                    align-items: center;
                    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .1);
                    border-radius: 20px;
                    padding: 20px;
                    .course-box {
                        margin-top: 10px;
                        width: 100%;
                        .content-img {
                            width: 100%;
                            display: flex;
                            margin-bottom: 30px;
                            cursor: pointer;
                            position: relative;
                            .left-num {
                                background-color: rgb(252, 139, 51);
                                width: 43px;
                                height: 20px;
                                position: absolute;
                                left: 0;
                                top: 0;
                                display: flex;
                                flex-wrap: wrap;
                                border-radius: 10px 0 20px 0;
                                color: #fff;
                                font-size: 12px;
                                padding-top: 0;
                                z-index: 401;
                                align-content: center;
                                justify-content: center;
                            }
                            .img-box {
                                overflow: hidden;
                                border-radius: 10px;
                                margin-right: 12px;
                                img{
                                    width: 170px;
                                    height: 100%;
                                    border-radius: 10px;
                                }
                            }
                           .title-price-box {
                            padding-top: 5px; 
                            :first-child {
                                font-family: PingFangSC-Medium, PingFang SC;
                                font-weight: 500;
                                height: 39px;
                                margin-bottom: 5px;
                                color: #4e5054;
                                display: -webkit-box;
                                overflow: hidden;
                                word-break: break-all;
                                text-overflow: ellipsis;
                                -webkit-box-orient: vertical;
                            }
                            :nth-child(2) {
                                color: #f32425;
                                font-size: 20px;
                                font-weight: 600;
                            }
                            :last-child {
                                font-weight: 500;
                                color: #b7bbc4;
                            }
                           }
                        }
                    }
                    .change-box {
                        margin-top: 20px;
                        width: 108px;
                        height: 29px;
                        background: linear-gradient(90deg, #fd952d, #f1534b);
                        border-radius: 15px;
                        color: #fff;
                        font-weight: 500;
                        border: none;
                        cursor: pointer;
                    }
                }
            }
        }

    }
     // 课程分类
    .container_1,
    .container_2,
    .container_3,
    .container_4{
        width: 1160px;
        height: 330px;
        margin: 15px auto 0;
        .container_list {
            width: 1160px;
            height: 330px;
            background: #fff;
            padding: 30px 20px;
            margin: 15px auto 0;
            border-radius: 20px;
            .ant-row {
                position: relative;
                height: auto;
                zoom: 1;
                display: block;
                box-sizing: border-box;
                header {
                    display: flex;
                    -webkit-box-align: center;
                    align-items: center;
                    font-size: 24px;
                    padding: 0 12px 10px 0;
                    border-bottom: 2px solid #e8e8e8;
                    .title-icon {
                        width: 38px !important;
                        margin-right: 15px;
                    }
                    .title-course {
                        font-weight: 600;
                    }
                    .vip-free {
                        cursor: pointer;
                        margin-left: 8px;
                        width: 93px;
                    }
                    .more-course {
                        font-size: 16px;
                        line-height: 34px;
                        margin-left: auto;
                        a{
                            color: #999;
                            text-decoration: none;
                        }
                    }
                }
                .container_bottom_1,
                .container_bottom_2,
                .container_bottom_3,
                .container_bottom_4 {
                    width: 1136px ;
                    // display: flex;
                    // justify-content: space-between;
                    .course-container {
                        .col {
                        width: 19%;
                        background: #fff;
                        box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .15);
                        border-radius: 10px;
                        float: left;
                        margin: 14px .5% 0;
                        a {
                            text-decoration: none;
                            color: #0f141a;
                            .course-cover {
                                height: auto;
                                margin-bottom: 6px;
                                .img-box {
                                    width: 100%;
                                    padding-top: 55%;
                                    position: relative;
                                    border-radius: 10px 10px 0 0;
                                    overflow: hidden;
                                    img {
                                        position: absolute;
                                        width: 100%;
                                        top: 0;
                                        left: 0;
                                        height: 100%;
                                        transition: all .6s ease;
                                    }
                                }
                            }
                            .course-cover-1 {
                                padding: 0px 8px;
                                .classList-introduce {
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    display: -webkit-box;
                                    -webkit-box-orient: vertical;
                                    -webkit-line-clamp: 1; 
                                    // 假设行高为 20px，两行就是 40px
                                    max-height: 20px; 
                                    line-height: 20px;
                                    margin-bottom: 6px;
                                }
                                .classList-person {
                                    color: #b7bbc4;
                                    height: 22px;
                                }
                                .red {
                                    color: red;
                                }
                                // .classList-price {
                                //     color: #ff4500;
                                //     .price-span {
                                //         font-size: 16px;
                                //     }
                                //     .old-price {
                                //         color: #999;
                                //         text-decoration: line-through;
                                //         font-size: 12px;
                                //     }
                                    
                                // }
                            }
                        }
                        }
                    }
                   
                }
            }
        }
    
    }

}
   
</style>
